<template>
	<view class="container_135">
		<view class="top_image">
			<image src="https://web.78keji.cn/images/lxn/ljj30.png" style="width: 750rpx" mode="widthFix"></image>
		</view>

		<lefts></lefts>
		<view class="form-container">
			<view class="image login-btn">
				<template v-if="userInfo.info.mobile">
					<image @click="confirmOrder" src="https://web.78keji.cn/images/lxn/ljjbt.png" mode="widthFix"></image>
				</template>
				<!-- 支付宝 和 微信不一样 -->

				<template v-else>
					<!-- #ifdef MP-WEIXIN -->
					<!-- 	<button class="wx-button" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber">授权并获取手机号</button> -->

					<button class="sub-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
						<image src="https://web.78keji.cn/images/lxn/ljjbt.png" mode="widthFix"></image>
					</button>

					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<text>支付宝</text>
					<!-- #endif -->
				</template>
			</view>
			<view class="agree-container">
				<checkbox-group @change="changeAll">
					<label>
						<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
						<text style="color: #000; font-weight: 400; font-size: 22rpx">已阅读并同意</text>
					</label>
				</checkbox-group>
				<view class="">
					<text style="color: #2677d1; font-weight: 400; font-size: 22rpx" @click="privatePro(1)">《用户协议》</text>
					<text style="color: #2677d1; font-weight: 400; font-size: 22rpx" @click="privatePro(30)">《活动规则》</text>
				</view>
			</view>
			<view class="d_f j_c_c" style="color: #2a2a2a; font-size: 20rpx; margin-top: 14rpx; text-align: center">业务资费：连续包月30元/月(可随时取消)</view>
			<view class="d_f j_c_c" style="color: #2a2a2a; font-size: 20rpx; margin-top: 14rpx; text-align: center">续订权益：大屏休闲会员+30元微信立减金</view>
			<view class="d_f j_c_c" style="color: #2a2a2a; font-size: 20rpx; margin-top: 14rpx; padding-bottom: 6rpx; text-align: center">客服热线：400-8825-101</view>
		</view>
		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
		<view class="arrive-btn" :style="{ display: showHeight > 500 ? '' : 'none' }">
			<image @click="toTop" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/lhhy/sh30/bt.png" mode="widthFix"></image>
		</view>
		<view class="fixed-1" @click="privatePro(30)">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/rule.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="receiveEquity">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/link.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-3" @click="phone">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/phone.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<tcl-confim v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler" @cancel="isShowAgreementConfirm = false" @showAgreement="showAgreementHandler"></tcl-confim>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import { storeToRefs } from 'pinia';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds } from '@/utils/login.js';
import paramApi from '@/apis/paramApi.js';
import { getProductNum } from '@/utils/commo.js';
const { userInfo } = storeToRefs(useUserStore());
const { constInfo } = constStore();
/* 协议 */
const uuIdsInit = uuIds();
const popupPro = ref();
const isShowAgreementConfirm = ref(false);
const agreeType = ref(1);
const allChecked = ref();
const showHeight = ref(0);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
const receiveEquity = () => {
	uni.navigateTo({
		url: `/pages/my/orderList?productType='TCL'`
	});
};
const agreementConfirmOkHandler = () => {
	allChecked.value = true;
	confirmOrder();
};
const showAgreementHandler = (value) => {
	console.log(value);
	agreeType.value = value;

	popupPro.value.open('center');
};

onLoad((query) => {
	paramApi.initData(query);
	// 获取用户的登录信息
	// #ifdef MP-ALIPAY
	// getALPhoneNumber();
	// #endif

	// #ifdef MP-WEIXIN
	getWXphoneNumber();
	// #endif
	setTimeout(()=>{
		getProductNum(paramApi.getA(), 'LH2525', uuIdsInit);
	},100)
});
const onGetPhoneNumber = (e) => {
	console.log(e, 'eeeee');
	const {
		detail: { encryptedData, iv, code }
	} = e;
	const params = {
		appId: 'wxd288833c4af82e86',
		code
	};
	initApi.getWXAuthor(params).then((res) => {
		console.log(res, '自己手动获取手机号');
		if (res.code == 20000) {
			if (res.data.accessToken) {
				uni.setStorageSync('token', res.data.accessToken);
				userInfo.value.token = res.data.accessToken;
				formData.mobile = res.data.mobile;
				userInfo.value.mobile = res.data.mobile;
			}
			// 下单
			confirmOrder();
		}
	});
};
const confirmOrder = () => {
	if (!allChecked.value) return (isShowAgreementConfirm.value = true);

	const arr = {
		productCode:'LH2525',
		channelCode: paramApi.getA(),
		mobile: formData.mobile ? formData.mobile : userInfo.value.info.mobile,
		orderType: 2,
		paymentMethod: 2,
		param: paramApi.getParam(),
		uniqueUserId: '',
		uuid: uuIdsInit,
		environmentCode: "4",
		scenarioCode: "7"
	};
	initApi.associateMemberSign(arr).then((res) => {
		console.log(res, 'uuiduuid');
		if (res.code == 20000) {
			handleJumpPaySign(res.data);
		} else {
			return uni.utils.toast(res.message);
		}
	});
};
/* 微信签约 */
const handleJumpPaySign = (query) => {
	wx.navigateToMiniProgram({
		appId: 'wxbd687630cd02ce1d', // 第三方
		// path: 'pages/lhhy/sh30/index',
		extraData: query.extInfo,
		success(res) {
			// 成功跳转到签约小程序
			return uni.utils.toast('签约成功');
		},
		fail(res) {
			// 未成功跳转到签约小程序
			return uni.utils.toast('签约失败');
		}
	});
};
const ok1 = () => {
	popupPro.value.close();
	allChecked.value = true;
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};

onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});
const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};

const privatePro = (type) => {
	console.log(type);
	agreeType.value = type;
	console.log(agreeType.value);
	popupPro.value.open('center');
};

const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
</script>

<style scoped lang="scss">
.container_135 {
	width: 750rpx;
	height: 100%;
	background-color: #85eefd;
	margin: 0 auto;
	position: relative;

	.form-container {
		height: 336rpx;
		border-radius: 40rpx;

		.image {
			text-align: center;
			margin-top: 90rpx;
		}

		.agree-container {
			margin-top: 40rpx;
			margin-bottom: 0rpx;
			padding-bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

::v-deep {
	image {
		vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
	}
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}

.wx-button {
	background-color: #409eff;
	width: 500rpx;
}
.sub-btn {
	background: none;
	padding: 0;
	margin: 0;
	border: none;
	animation: scaleUp 2.5s infinite;
	box-shadow: none;
	border-style: none;
	margin-top: 25rpx;
	min-height: 120rpx;
	border::after {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		content: none;
		border-style: none;
	}
}
</style>
<style>
	page{
	width: 750rpx;
	height: 100%;
	background-color: #85eefd;
	margin: 0 auto;
	}
</style>